<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link href="http://at.alicdn.com/t/font_1435514_lxxm9rqror.css" rel="stylesheet">
    <style>
        body {
            color: #606266;
            width: 100%;
        }

        header {
            margin-top: 2px;
            width: 100%;
            height: 50px;
            line-height: 50px;
            background-color: white;
            overflow: hidden;
        }

        header span,
        header p {
            display: inline-block;
            padding: 0 10px;
        }

        header p {
            float: right;
            color: red;
            margin-right: 4%;
            cursor: pointer;
        }

        main {
            width: 94.5%;
            padding: 2%;
            margin: 10px;
            font-size: 14px;
            background-color: white;
        }

        aside {
            overflow: hidden;
        }

        main p {
            width: 94%;
            margin: 10px 0;
            color: #999;
            padding: 0px 0 10px 20px;
            border-bottom: 1px solid #dcdfe6;
        }

        main input,
        main select {
            height: 35px;
            border: 1px solid #dcdfe6;
        }

        main ul {
            width: 100%;
        }

        main li {
            height: 30px;
            padding: 10px 0;
            overflow: hidden;
        }

        main li>div {
            float: left;
        }

        main li span {
            float: left;
        }

        main li div div {
            float: left;
        }

        main li>div span {
            display: inline-block;
            height: 30px;
            line-height: 30px;
            width: 25%;
            text-align: right;
            padding-right: 5%;
        }

        main li>div div {
            width: 68%;
            border: 1px solid #dcdfe6;
            border-radius: 5px;
        }

        main input,
        main select {
            width: 95%;
            border: none;
            padding-left: 5%;
            outline: none;
            color: #98999e;
            border-radius: 5px;
        }

        input::-webkit-input-placeholder {
            color: #abacb1;
        }

        main select {
            width: 100%;
        }

        .three>div {
            width: 32.5%;
        }

        main li>div {
            width: 49%;
        }

        .left ul:last-of-type li>div {
            width: 110%;
        }

        .left ul:last-of-type li span {
            width: 15%;
        }

        .left {
            float: left;
            width: 48%;
        }

        .right {
            float: right;
            width: 48%;
        }

        .bottom {
            width: 100%;
            background-color: white;
        }

        .bottom ul {
            display: none;
        }

        .bottom li:last-of-type {
            height: 100px;
        }

        .bottom span {
            width: 6%;
        }

        .bottom li>div {
            width: 100%;
        }

        .bottom li:first-of-type>div div {
            width: 20%;
        }

        .bottom li:last-of-type>div div {
            width: 88%;
            height: 100px;
        }

        .bottom textarea {
            width: 100%;
            height: 90px;
            border: none;
            padding: 10px 0px 0px 0px;
            margin: 0;
            text-indent: 1.5em;
            border-radius: 5px;
        }

        footer p,
        footer a {
            width: 97%;
            border: 1px dashed #dcdfe6;
            border-radius: 5px;
            cursor: pointer;
            text-align: center;
        }

        footer p:hover {
            background-color: #d3d3d3;
            color: #4eaf9d;
            border-color: #4eaf9d;
        }

        footer a {
            border: none;
            background-color: #429788;
            width: 250px;
            height: 36px;
            line-height: 36px;
            display: block;
            color: white;
            margin: auto;
        }

        footer a:hover {
            background-color: #3dbea7;
        }

        footer span {
            margin-right: 10px;
            font-weight: 700;
        }

        #bumenhebanji {
            height: 100%;
        }

        .bby {
            float: left;
            border: none;
            width: 25%;
            margin-left: 5px;
            margin-right: 5px;
        }

        .bby div {
            border: none;
            width: 100%;
            height: 40%;
        }

        .rad {
            width: 10px;
            height: 10px;
            float: left;
            margin-left: 10px;
        }

        .bumen {
            float: left;
        }

        .banji {
            float: left;
        }
    </style>
</head>

<body>
    <header>
        <a href="student management.html"><span>学生管理</span></a>/
        <span>学生列表</span>
        <!-- <p><em class="icon iconfont icon-bianji"></em>修改信息</p> -->
    </header>
    <main>
        <aside>
            <div class="left public">
                <p>基本信息</p>
                <ul>
                    <li class="three">
                        <div>
                            <span>姓名</span>
                            <div><input id="studentName" type="text" placeholder="请输入姓名" value=""></div>
                        </div>
                        <div>
                            <span>性别</span>
                            <div>
                                <select id="setSex">
                                    <option value="">性别</option>
                                    <option value="">男</option>
                                    <option value="">女</option>
                                </select>
                            </div>
                        </div>
                        <div>
                            <span>年龄</span>
                            <div><input id="studentAge" type="text" placeholder="年龄" value=""></div>
                        </div>
                    </li>
                    <li>
                        <div>
                            <span>电话</span>
                            <div><input id="studentPhone" type="text" placeholder="请输入电话" value=""></div>
                        </div>
                        <div>
                            <span>微信号</span>
                            <div><input id="studentWX" type="text" placeholder="请输入微信号" value=""></div>
                        </div>
                    </li>
                    <li>
                        <div>
                            <span>QQ</span>
                            <div><input id="studentQQ" type="text" placeholder="请输入QQ" value=""></div>
                        </div>
                        <div>
                            <span>意向学科</span>
                            <div>
                                <select>
                                    <option value="">清选择学科</option>
                                    <option value="">HTML</option>
                                    <option value="">JAVA</option>
                                </select>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div style="width: 110%;">
                            <span style="width: 15%;">身份证号</span>
                            <div><input id="studentSFZ" type="text" placeholder="请输入身份证号" value=""></div>
                        </div>
                    </li>
                </ul>
                <p>紧急联系人信息</p>
                <ul>
                    <li>
                        <div>
                            <span>姓名</span>
                            <div><input id="emergencyName" type="text" placeholder="紧急联系人姓名" value=""></div>
                        </div>
                    </li>
                    <li>
                        <div>
                            <span>电话</span>
                            <div><input id="emergencyTelephone" type="text" placeholder="紧急联系人电话" value=""></div>
                        </div>
                    </li>
                    <li>
                        <div>
                            <span>与本人关系</span>
                            <div>
                                <select id="relaTion">
                                    <option value="">与本人关系</option>
                                    <option value="">父子</option>
                                    <option value="">母子</option>
                                    <option value="">夫妻</option>
                                    <option value="">朋友</option>
                                </select>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="right public">
                <p>学校信息</p>
                <ul>
                    <li>
                        <div>
                            <span>学校名称</span>
                            <div><input id="schoolName" type="text" placeholder="请输入学校名称" value=""></div>
                        </div>
                        <div>
                            <span>学制</span>
                            <div><input id="educationSystme" type="text" placeholder="请输入学制" value=""></div>
                        </div>
                    </li>
                    <li>
                        <div>
                            <span>专业</span>
                            <div><input id="major" type="text" placeholder="请输入专业" value=""></div>
                        </div>
                        <div>
                            <span>年级</span>
                            <div><input id="studentGarde" type="text" placeholder="请输入年级" value=""></div>
                        </div>
                    </li>
                </ul>
                <p>学生记录</p>
                <ul>
                    <li>
                        <div>
                            <span>学生来源</span>
                            <div>
                                <select id="likeStudy1">
                                    <option value="">学生来源</option>
                                    <option value="">网址</option>
                                    <option value="">社招</option>
                                </select>
                            </div>
                        </div>
                        <div>
                            <span>缴费方式</span>
                            <div>
                                <select id="likeStudy2">
                                    <option value="">缴费方式</option>
                                    <option value="">支付宝</option>
                                    <option value="">微信</option>
                                    <option value="">现金</option>
                                </select>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div>
                            <span>学费金额</span>
                            <div><input type="text" placeholder="21800" value=""></div>
                        </div>
                        <div>
                            <span>意向类型</span>
                            <div>
                                <select>
                                    <option value="">请输入意向类型</option>
                                    <option value="">A类</option>
                                    <option value="">B类</option>
                                    <option value="">C类</option>
                                </select>
                            </div>
                        </div>
                    </li>
                </ul>
                <p>口碑联系人信息</p>
                <ul>
                    <li>
                        <div>
                            <span>校区</span>
                            <div>
                                <select id="likeStudy4">
                                    <!-- <option value="">校区</option>
                                    <option value="">A类</option>
                                    <option value="">B类</option>
                                    <option value="">C类</option> -->
                                </select>
                            </div>
                        </div>
                        <div id="bumenhebanji">
                            <div class="bby">
                                <div><input id="teamN" class="rad" type="radio" name="aaa">部门</div>
                                <div><input id="classN" class="rad" type="radio" name="aaa">班级</div>
                            </div>
                            <div>
                                <select id="likeStudy5">
                                    <!-- <option value="">员工/班级</option>
                                    <option value="">A类</option>
                                    <option value="">B类</option>
                                    <option value="">C类</option> -->
                                </select>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div>
                            <span>姓名</span>
                            <div>
                                <select id="likeStudy6">
                                    <!-- <option value="">姓名</option>
                                    <option value="">A类</option>
                                    <option value="">B类</option>
                                    <option value="">C类</option> -->
                                </select>
                            </div>
                        </div>
                        <div>
                            <span>联系电话</span>
                            <div><input id="likeStudy7" type="tel" placeholder="联系电话" value=""></div>
                        </div>
                    </li>
                </ul>
            </div>
        </aside>
        <div class="bottom">
            <p>记录信息</p>
            <ul>
                <li>
                    <div>
                        <span>记录类型</span>
                        <div>
                            <select>
                                <option value="">记录类型</option>
                                <option value="">A类</option>
                                <option value="">B类</option>
                                <option value="">C类</option>
                            </select>
                        </div>
                    </div>
                </li>
                <li>
                    <div>
                        <span>记录内容</span>
                        <div><textarea placeholder="请录入记录详情"></textarea></div>
                    </div>
                </li>
            </ul>
        </div>
        <footer>
            <p><span class="icon iconfont icon-tianjia"></span>添加记录</p>
            <a href="student management.html" id="butnBA"><span class="icon iconfont icon-tijiao1"></span>提交</a>
        </footer>
    </main>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script src="js/ipUrl.js"></script>
<script src="js/koubei.js"></script>
<script>


    // 提交请求
    $('#butnBA').on('click', function () {
        if ($('#setSex').val() == "女") {
            var sex = 0;
        } else {
            var sex = 1;
        }
        $.ajax({
            url: studentURL + ':9999/oaSystem/addStu',
            dataType: "json",
            type: "post",
            data: {
                studentName: $('#studentName').val(),
                studentSex: sex,
                age: $('#studentAge').val(),
                telephone: $('#studentPhone').val(),
                weixin: $('#studentWX').val(),
                qq: $('#studentQQ').val(),
                idCard: $('#studentSFZ').val(),
                emergencyName: $('#emergencyName').val(),
                emergencyContact: $('#emergencyTelephone').val(),
                relationship: $('#relaTion').val(),
                schoolId: $('#schoolName').val(),
                educationSystme: $('#educationSystme').val(),
                major: $('#major').val(),
                studentGarde: $('#studentGarde').val(),
                sourceId: $('#likeStudy1').val(),
                payment: $('#likeStudy2').val(),
                inputId: $('#likeStudy3').val(),
                centreid: $('#likeStudy4').val(),
                subjectId: $('#classN').val(),
                flowDesc: $('#likeStudy6').val(),
                womTel: $('#likeStudy7').val(),
                method: 'addStu'
            },
            success: function (data) {
                console.log(data);
                window.location.href = 'student management.html';
            },
            error: function (xhr, err) {
                console.log(err)
            }
        })
    })
    //检索localStorage
    //查看
    if (localStorage.getItem("ONOFF") === 'true') {
        $('input,textarea').prop('readonly', 'true');
        $('select').prop('disabled', 'disabled');
        $("footer").css('display', 'none');
        //修改信息
        $('header p').on('click', function () {
            $('input').removeAttr('readonly');
            $("footer").css('display', 'block');
        })
    }
    //跳转添加
    if (localStorage.getItem("ONOFF1") === 'true') {
        $('header p').css('display', 'none');
    }
    //编辑
    if (localStorage.getItem("ONOFF0") === 'true') {
        $('input,textarea').removeAttr('readonly', 'true');
        $('select').removeAttr('disabled', 'disabled');
        $("footer").css('display', 'block');
    }
    //添加
    $('footer p:eq(0)').on('click', function () {
        $('.bottom ul').css('display', 'block');
    })
    //提交
    $('footer p:eq(1)').on('click', function () {

    })

    
</script>

</html>